/* ****************************公共样式***************************** */
*{
    box-sizing: border-box;
}
html,body{
    height: 100%;
    background: #fff;
    color:#333;
}
.clearfix::after {
    content: '';
    display: block;
    clear: both;
    height: 0;
    visibility: hidden;
}
#__nuxt{
    height: 100%;
}
#sign-template {
    height: 100%;
    background: #f1f1f1;
}
#default-template{
    height: 100%;
    padding-top: 56px;
    background: #fff;
}
a,a:hover,a:focus {
    text-decoration: none!important;
    color:inherit!important;
}
input:focus {
    outline:none;
}
h1,h2,h3,h4,h5,h6 {
    margin:0;
    padding:0;
}
ul,ol,dl {
    list-style:none;
    margin:0;
    padding:0;
}
.my-container{
    margin-right: auto;
    margin-left: auto;
    padding-left: 15px;
    padding-right: 15px; 
}

@media (min-width:992px){
    .my-container {
        width: 960px;
    }
}
@media (max-width:1080px){
    .my-container {
        width: 750px;
    }
}

@media (max-width:750px){
    body,html{
        overflow-x: hidden;
    }
}
@media (max-width:785px){
    .note .post {
        margin: 0 74px;
    }
}
/*******************************首页布局*************************************/
.index {
    padding-top: 30px;
}
.index .main{
    height: 1500px;
    padding-right:0; 
}
.index .aside{
    height: 500px;
    padding: 0 0 0 4.16667%;
}

/* 左边 占8 */
.index .main .banner img{
    width: 100%;
    border-radius: 10px;
}
.index .main .banner{
    margin-bottom: 35px;
}
.index .main .recommend-collection{
    margin-bottom: 10px;
}
.index .main .recommend-collection a{
    min-height: 32px;
    display: inline-block;
    margin: 0 18px 18px 0;
    border-radius: 6px;
    background-color: #f7f7f7;
    border: 1px solid #ccc;
    overflow: hidden;
}
.index .main .recommend-collection .more-hot-collection{
    display: inline-block;
    margin: 0 18px 18px 0;
    line-height: 32px;
    font-size: 14px;
    background: none;
    border: none;
    color: #787878 !important;
}
.index .main .recommend-collection a img{
    width: 32px;
    height: 32px;
    vertical-align: bottom;
    border-top-left-radius: 6px;
    border-bottom-left-radius: 6px;
}
.index .main .recommend-collection a span{
    line-height: 32px;
    padding: 0 10px;
    display: inline-block;
    font-size: 14px;
}
.index .main .split-line{
    margin: 0 0 15px;
    border-bottom: 1px solid #f0f0f0;
}
.note-list{
    border: 0;
    padding: 0;
    margin: 0;
    list-style: none;
}
.note-list li{
    position: relative;
    width: 100%;
    padding: 0 0 17px 0;
    margin: 0 0 17px 0;
    border-bottom: 1px solid #ccc;
    word-wrap:break-word; /*自动换行*/ 
}
.note-list li.have-img>.wrap-img{
    position: absolute;
    top:50%;
    right: 0;
    margin-top: -60px;
    width: 150px;
    height: 120px;
}
.note-list li.have-img>.wrap-img img{
    width: 100%;
    height: 100%;
    border-radius: 4px;
    border: 1px solid #f0f0f0;
}
.note-list li.have-img .content{
    padding-right: 160px;
}
.note-list .author {
    margin-bottom: 10px;
    font-size: 13px;
}
.note-list .author .avatar,.note-list .author .info{
    display: inline-block;
    vertical-align: middle;
}
.avatar{
    width: 32px;
    height: 32px;
    display: block;
}
.avatar img{
    width: 100%;
    height: 100%;
    border-radius: 50%;
    border: 1px solid #ccc;
}
.note-list .author .avatar{
    margin: 0 10px 0 0;
}
.note-list .author .info .time{
    color: #969696;
    padding-left: 5px;
}
.note-list .title{
    font-size: 18px;
    font-weight: 700;
}
.note-list .title:visited{
    color: #969696 !important;
}
.note-list .abstract{
    font-size: 13px;
    line-height: 24px;
    margin:  5px 0 13px 0;
}
.note-list .meta{
    font-size: 12px;
    line-height: 20px;
    font-weight: 400;
}
.note-list .meta .collection-tag{
    display: inline-block;
    color: #ea6f5a !important;
    border: #f1907f 1px solid;
    padding: 5px;
    border-radius: 4px;
    margin-right: 10px;
    transition: all ease-in .5s;
    max-width: 200px;
    overflow: hidden;
    text-overflow: ellipsis; /*变成...*/
    white-space: nowrap;  /*不换行*/
    vertical-align: middle; /*和其他元素垂直居中对齐*/
}
.note-list .meta .collection-tag:hover{
    color: #ea6f5a !important;
    background-color: #fef7f5;
    border-color: #ec6179;
}
.note-list .meta a,.note-list .meta span{
    margin-right: 10px;
    color: #b4b4b4 !important;
}
.note-list .meta a:hover{
    color: #787878 !important;
}
@media (max-width:1080px){
    .note-list li.have-img .wrap-img{
        margin-top: -58px;
        bottom: 40px;
        width: 125px;
        height: 100px;
    }
    .note-list li.have-img .content{
        padding-right: 135px;
    }
}

.index .main .load-more{
    display: block;
    width: 100%;
    height: 40px;
    text-align: center;
    color: #fff;
    background: #a5a5a5;
    border-radius: 20px;
    margin: 30px auto 60px;
    padding: 10px 15px;
    font-size: 15px;
}

/* 右边 占4 */
.index .aside .board{
    margin-bottom: 6px;
}
.index .aside .board img{
    width: 100%;
    margin-bottom: 4.5px;
}
.aside .download{
    position: relative;
    display: block;
    width: 100%;
    min-height:70px;
    border:1px solid #ccc;
    border-radius: 4px;
    background-color: #fff;
    padding:7px 10px;
    margin-bottom: 30px;
    cursor: pointer;
}
.aside .download img{
    float: left;
    width: 60px;
    height: 60px;
    margin-right: 8px;
}
.aside .download span{
    font-size: 13px;
    color: #969696 !important;
}
.aside .download .erweima{
    position: absolute;
    top:-208px;
    left: 10px;
    width: 200px;
    height: 200px;  
    border: 1px solid #ccc;
    border-radius: 10px;
    box-shadow: 0 0 8px rgba(0,0,0,.1);
}
.recommend-author{
    margin: 30px 0 10px 0;
    font-size: 13px;
    text-align: center;
}
.recommend-author .title{
    text-align: left;
    color: #969696;
}
.recommend-author .title .page-change{
    float: right;  
}
.recommend-author .title .page-change:hover{
    color: #787878 !important;
}
.recommend-author .title .page-change i{
    transition: ease .2s;
}
.recommend-author .list{
    margin-bottom: 20px;
    text-align: left;
}
.recommend-author .list li{
    margin-top: 15px;
}
.recommend-author .list li .avatar{
    float: left;
    width: 48px;
    height: 48px;
    margin-right: 10px;
}
.recommend-author .list li .follow{
    float: right;
    font-size: 13px;
    color: #42c02e !important;
    margin-top: 5px;
}
.recommend-author .list li .name{
    display: block;
    padding-top: 5px;
    margin-right: 60px;
    font-size: 15px;
}
.recommend-author .list li p{
    color: #969696;
    font-size: 12px;
}
.recommend-author .find-more{
    display: block;
    width: 100%;
    padding:  7px 7px 7px 12px;
    color: #787878 !important;
    border: 1px solid #ccc;
    background: #f7f7f7;
    font-size: 13px;
    border-radius: 10px
}
.recommend-author .find-more i{
    margin-left: 8px;
}

.foot{
    width: 100%;
    height: 100px;
    padding-top: 10px;
    font-size: 14px;
    background-color: #ea6f5a;
    border-bottom-left-radius: 50px;
    border-bottom-right-radius: 50px;
    text-align: center;
}
/* ****************************文章页面布局 ***********************************/
.note {
    position: relative;
    padding-top: 10px;
}
.note .post{
    width: 620px;
    margin: 0 auto;
    padding-top: 20px;
    padding-bottom: 40px;
}
@media (max-width:785px){
    .note .post {
        margin: 0 74px;
    }
}
.note .post .article .title{
    font-size: 34px;
    font-weight: 700;
    margin:  20px 0 0;
    word-break: break-all;
}
.note .post .article .author {
    margin: 30px 0 40px 0;
}
.note .post .article .author .avatar{
    width: 48px;
    height: 48px;
    display: inline-block;
    border-radius: 50%;
    border: 1px solid #ccc;
}
.note .post .article .author .info{
    display: inline-block;
    margin-left: 10px;
    vertical-align: middle;
}
.note .post .article .author .info .name{
    font-size: 16px;
    margin-right: 5px;
}
.note .post .article .follow{
    color: #ffffff !important;
    font-size: 12px;
    border-radius: 20px;
    background: #42c02e !important;
    padding: 1px 10px 1px 7px;
}
.note .post .article .following {
    background:#fff;
    color:#969696;
    border:1px solid #ccc;
    font-size:12px;
    border-radius: 20px;
    padding:1px 8px 1px 6px;
}
.note .post .article .author .info .btn-sm span{
    margin-left: 5px;
}

.note .post .article .author .meta{
    margin-right: 5px;
    font-size: 12px;
    color: #969696;
}
.note .post .article .author .meta span{
    margin-right: 5px;
}
.note .post .article .show-content{
    font-size: 16px;
    font-weight: 400;
    word-break: break-all;
    color: #2f2f2f;
    line-height: 1.7;
}
.note .post .article .show-content p {
    margin: 0 0 20px;
}
.note .post .article .show-foot{
    margin-bottom: 30px;
}
.note .post .article .show-foot .notebook{
    font-size: 12px;
    color: #c8c8c8 !important;
}
.note .post .article .show-foot .notebook i{
    margin-right: 5px;
}
.note .post .article .show-foot .copyright{
    float: right;
    font-size: 12px;
    color: #c8c8c8;
}
.note .post .article .follow-detail{
    padding: 20px;
    background: #f8f8f8;
    border: 1px solid #e1e1e1;
    border-radius: 6px;
}
.note .post .article .follow-detail .avatar {
    width: 48px;
    height: 48px;
    margin-right: 10px;
    float: left;
}
.note .post .article .follow-detail .btn{
    float: right;
    box-shadow: none;
    width: 100px;
    padding: 8px 0;
    font-size: 16px;
}
.note .post .article .follow-detail .btn span{
    margin-left: 5px;
}
.note .post .article .follow-detail .following{
    background: none;
}
.note .post .article .follow-detail .title{
    font-size: 17px;
    line-height: 1.8;
    margin-right: 5px;
}
.note .post .article .follow-detail .info>i{
    color: #3194d0;
    font-size: 15px;
}
.note .post .article .follow-detail .info p{
    color: #969696;
    margin-bottom: 0;
    font-size: 12px;
}
.note .post .article .follow-detail .signature{
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid #ddd;
    color: #969696;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 12px;
}
.note .post .article .meta-bottom{
    margin: 40px 0 80px;
}
.note .post .article .meta-bottom .like{
    display: inline-block;
    color: #ea6f5a;
}
.note .post .article .meta-bottom .share-group{
    float: right;
}
.note .post .article .meta-bottom .like-group{
    border: 1px solid #ea6f5a;
    padding: 13px 0 15px;
    border-radius: 40px;
}
.note .post .article .meta-bottom .like-group:hover{
    background: #fef7f5;
}
.note .post .article .meta-bottom .like .active{
    background: #ea6f5a;
    color: white !important;
}
.note .post .article .meta-bottom .like .active .modal-wrap{
    border-color: white;
}
.note .post .article .meta-bottom .like-group .btn-like{
    font-size: 19px;
    display: inline-block;   
    
}
.note .post .article .meta-bottom .like-group .btn-like a{
    padding: 18px 15px 18px 30px;   
}
.note .post .article .meta-bottom .like-group .btn-like a i{
    margin-right: 5px;
}
.note .post .article .meta-bottom .like-group .modal-wrap{
    font-size: 18px;
    display: inline-block;
    border-left: 1px solid #ea6f5a;
}
.note .post .article .meta-bottom .like-group .modal-wrap a{
    padding: 18px 30px 18px 17px; 
}
.note .post .article .meta-bottom  .share-group a{
    display: inline-block;
    width: 50px;
    height: 50px;
    text-align: center;
    line-height: 50px;
    border-radius: 50%;
    border: 1px solid #dcdcdc;
    background: #fff;
    margin-left: 5px;
}
.note .post .article .meta-bottom  .share-group a i{
    font-size: 22px;
}
.note .post .article .meta-bottom  .share-group a:hover{
    background: #f8f8f8;
}
.weibo{
    color: #e05244;
}
.weixin{
    color: rgb(33, 119, 33);
}
.qq{
    color: rgb(26, 201, 231);
}
.note .post .article .meta-bottom  .share-group .more-share{
    position: relative;
    width: auto;
    line-height: 42px;
    font-size: 14px;
    padding: 4px 18px;
    border-radius: 30px
}
.note .post .article .meta-bottom  .share-group .more-share .share-list{
    position: absolute;
    top:-181px;
    left:-40px;
    width: 170px;
    height: 170px;
    border: 1px solid #787878;
    border-radius: 6px;
    background: #fff;
    padding: 1px;
    box-shadow: 0 3px 2px 2px #dcdcdc;
}
.note .post .article .meta-bottom  .share-group .more-share .share-list .sanjiao{
    position: absolute;
    top: 168px;
    left: 73px;
}
.note .post .article .meta-bottom  .share-group .more-share .share-list li{
    height: 33px;
    line-height: 33px;
    text-align: left;
}
.note .post .article .meta-bottom  .share-group .more-share .share-list li:hover{
    background: #f0f0f0;
}
.note .post .article .meta-bottom  .share-group .more-share .share-list li i{
    font-size: 20px;
    margin-left: 10px;
    margin-right: 10px;
}
.note .post .article .meta-bottom  .share-group .more-share .share-list li span{
    font-size: 15px;
}
.qqkj{
    color: #fec801;
}
.twitter{
    color: #00aaec;
}
.facebook{
    color: #4460a0;
}
.google{
    color: #fa3f2d;
}
.douban{
    color: green;
}

/* 留言加载效果布局 */
.comment-placeholder{
    padding: 20px 0 30px 0;
}
.comment-placeholder .author{
    margin-bottom: 15px;
}
.comment-placeholder .author .avatar{
    background-color: #eaeaea;
    border-radius: 50%;
    display: inline-block;
    vertical-align: middle;
}
.comment-placeholder .author .info{
    display: inline-block;
    vertical-align: middle;
}
.comment-placeholder .author .info .name{
    width: 60px;
    height: 15px;
    margin-bottom: 6px;
    background-color: #eaeaea;
}
.comment-placeholder .author .info .meta{
    width: 120px;
    height: 12px;
    background-color: #eaeaea;
}
.comment-placeholder .title{
    width: 100%;
    height: 16px;
    background-color: #eaeaea;
    margin-bottom: 8px;
    animation: loading 1s ease-in-out infinite;
}
.comment-placeholder .animated-delay{
    animation: loading 1s ease-in-out -.5s infinite;
}
.comment-placeholder .tool-group{
    font-size: 15px;
    color: #eaeaea;
    padding-top: 6px;
}
.comment-placeholder .tool-group i{
    margin-right: 5px;
}
.comment-placeholder .tool-group .zan{
    width: 40px;
    height: 14px;
    margin-right: 10px;
    display: inline-block;
    background-color: #eaeaea;
}
@keyframes loading{
    0%{
        width: 40%;
    }
    25%{
        width: 100%;
    }
    50%{
        width: 100%;
    }
    100%{
        width: 40%;
    }
}
/* ******************************个人中心页面********************************* */
.person .row {
    padding-top: 30px;
}
.person .main .main-top {
    margin-bottom: 20px;
}
.person .main .main-top .avatar {
    float: left;
    width: 80px;
    height: 80px;
    margin-left: -2px;
}
.user-follow-button {
    text-align: center;
    border-radius: 40px;
    font-weight: 400;
    border: 1px solid transparent;
    line-height: normal;
    user-select: none;
    pointer-events: auto !important;
    cursor: pointer;
    outline: none!important;
}
.user-follow-button:hover {
    /* background:rgb(61,185,34)!important; */
}
.main .main-top .follow{
    color: #ffffff !important;
    font-size: 12px;
    border-radius: 20px;
    background: #42c02e !important;
    padding: 1px 10px 1px 7px;
}
.main .main-top .following{
    background:#fff;
    color:#969696;
    border:1px solid #ccc;
    font-size:12px;
    border-radius: 20px;
    padding:1px 8px 1px 6px;
    background: none;
}
.user-follow-button span {
    margin-left:2px;
}
.user-follow-button.off {
    color: #fff;
    background-color: #42c02e;
}
.person .main .main-top .btn, .person .main .main-top .user-follow-button {
    float: right;
    margin: 23px 0 23px 16px;
    font-size: 15px;
}
.person .main .main-top .user-follow-button {
    padding: 8px 0;
    width: 100px;
    box-shadow: none;
}
/* .follow{
    color: #ffffff !important;
    font-size: 12px;
    border-radius: 20px;
    background: #42c02e !important;
    padding: 1px 10px 1px 7px;
}
.following{
    background:#fff;
    color:#969696;
    border:1px solid #ccc;
    font-size:12px;
    border-radius: 20px;
    padding:1px 8px 1px 6px;
    background: none;
} */
.person .main .main-top .btn-hollow {
    padding: 8px 0;
    width: 90px;
}
.btn-hollow {
    border: 1px solid rgba(59,194,29,.7)!important;
    color: #42c02e!important;
}
.btn-hollow:hover {
    color:#42c02e!important;
    background:rgb(245,252,243);
}
.btn-delete, .btn-gray, .btn-hollow {
    padding: 4px 12px;
    font-size: 12px;
    font-weight: 400;
    line-height: normal;
    border-radius: 40px!important;
    background: none;
}
.person .main .main-top .title {
    padding: 5px 0 0 100px;
}
.person .main .main-top .title i {
    vertical-align: middle;
    color:#3194d0;
    font-size:17px;
}
.person .main .main-top .title .name {
    display: inline;
    font-size: 21px;
    font-weight: 700;
    vertical-align: middle;
}
.person .main .main-top .info {
    margin-top: 5px;
    padding-left: 100px;
    font-size: 14px;
}
.person .main .main-top .info ul {
    font-size: 0;
}
.person .main .main-top .info ul li {
    display: inline-block;
}
.person .main .main-top .info ul .meta-block {
    font-size: 12px;
    margin: 0 7px 6px 0;
    padding: 0 7px 0 0;
    border-right: 1px solid #f0f0f0;
}
.person .main .main-top .info ul li:last-child .meta-block {
    border-right:none;
}
.person .main .main-top .info ul a, .person .main .main-top .info ul div {
    color: #969696;
}
.person .main .main-top .info ul p {
    margin-bottom: -3px;
    font-size: 15px;
    color: #333;
}
.trigger-menu {
    margin-bottom: 20px;
    border-bottom: 1px solid #f0f0f0;
    font-size: 0;
    list-style: none;
}
.trigger-menu li {
    position: relative;
    display: inline-block;
    padding: 8px 0;
    margin-bottom: -1px;
}
.trigger-menu a {
    padding: 13px 20px;
    font-size: 15px;
    font-weight: 700;
    color: #969696!important;
    line-height: 25px;
}
.trigger-menu i {
    margin-right: 5px;
    font-size: 17px;
}
.trigger-menu li.active {
    border-bottom: 2px solid #646464;
}
.trigger-menu .active a, .trigger-menu a:hover {
    color: #646464!important;
}
.trigger-menu li:after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: -2px;
    width: 100%;
    opacity: 0;
    border-bottom: 2px solid #646464;
    -webkit-transform: translate(-50%) scaleX(0);
    transform: translate(-50%) scaleX(0);
    transition: .2s ease-in-out
}
.trigger-menu li:hover:after {
    opacity: 1;
    -webkit-transform: translate(-50%) scaleX(1);
    transform: translate(-50%) scaleX(1);
    transition: .2s ease-in-out
}
.person .aside .title {
    float: left;
    margin-bottom: 10px;
    font-size: 14px;
    color: #969696;
}
.person .aside .function-btn {
    float: right;
    font-size: 13px;
    color: #969696;
}
.person .aside .description, .person .aside .new-collection-block {
    position: relative;
    margin-bottom: 16px;
    padding: 0 0 16px;
    text-align: left;
    font-size: 0;
    border-bottom: 1px solid #f0f0f0;
    clear: both;
    word-break: break-word!important;
    word-break: break-all;
}
.person .aside .description .js-intro, .person .aside .new-collection-block .js-intro {
    margin-bottom: 10px;
    line-height: 20px;
    font-size: 14px;
}
.person .aside .user-dynamic {
    padding-bottom: 6px;
}
.person .aside .list {
    margin-bottom: 16px;
    padding-bottom: 16px;
    list-style: none;
    border-bottom: 1px solid #f0f0f0;
    clear: both;
}
.person .aside .list li {
    margin-bottom: 10px;
}
.person .aside .list li a {
    display: inline-block;
}
.person .aside .user-dynamic a {
    font-size: 14px;
    color: #333;
    line-height: 30px;
}
.person .aside a, .person .aside a:hover {
    color: #3194d0;
}
.person .aside .user-dynamic i {
    margin-right: 10px;
    font-size: 20px;
    vertical-align: middle;
}
.person .aside .user-dynamic span {
    vertical-align: middle;
}
.person .aside .title {
    float: left;
    margin-bottom: 10px;
    font-size: 14px;
    color: #969696;
}
.person .aside .new-collection-btn {
    font-size: 13px;
    color: #42c02e!important;
}
.person .aside .function-btn {
    float: right;
    font-size: 13px;
    color: #969696;
}
.person .aside .new-collection-btn i {
    padding-right: 2px;
}
.person .aside .list {
    margin-bottom: 16px;
    padding-bottom: 16px;
    list-style: none;
    border-bottom: 1px solid #f0f0f0;
    clear: both;
}
.person .aside .avatar, .person .aside .avatar-collection {
    margin-right: 5px;
    width: 32px;
    height: 32px;
}
.avatar-collection img {
    width: 100%;
    height: 100%;
    border: 1px solid #ddd;
    border-radius: 10%;
}
.person .aside .name {
    position: relative;
    max-width: 236px;
    vertical-align: middle;
    top: 1px;
    font-size: 14px;
    color: #333;
}
.person .aside .list li a i {
    color:#969696;
    font-size:20px;
    vertical-align: middle;
    margin-right: 5px;
}
.note-list .meta span {
    margin-right: 10px;
    color: #b4b4b4;
}
.note-list .meta a {
    margin-right: 10px;
    color: #b4b4b4;
}
.note-list .comment {
    font-size: 15px;
    line-height: 1.7;
}
.note-list blockquote {
    margin-bottom: 0;
    color: #969696;
    border-left: 3px solid #d9d9d9;
    padding: 10px 20px;
    margin: 0 0 20px;
    font-size: 17.5px;
}
.note-list blockquote .title {
    display:block;
    margin: 0 0 4px;
    font-size: 15px;
    color:#333!important;
}
.note-list blockquote .abstract {
    margin: 0 0 4px;
}
.note-list .origin-author {
    display: inline;
    margin-bottom: 5px;
    font-size: 12px;
    color: #969696!important;
}
.note-list .origin-author a {
    margin-right: 5px;
    color: #3194d0!important;
}

.note-list .origin-author a {
    color: #3194d0!important;
}
.note-list .follow-detail {
    padding: 20px;
    background-color: hsla(0,0%,71%,.1);
    border: 1px solid #e1e1e1;
    border-radius: 4px;
    font-size: 12px;
}
.note-list .follow-detail .avatar, .note-list .follow-detail .avatar-collection {
    float: left;
    margin-right: 10px;
    width: 48px;
    height: 48px;
}
.note-list .follow-detail .btn {
    float: right;
    margin-top: 4px;
    padding: 8px 0;
    width: 100px;
}
.note-list .follow-detail .follow {
    border-radius: 40px;
    color: #fff!important;
    background-color: #42c02e;
}
.note-list .follow-detail .follow span {
    margin-left:5px;
}
.note-list .follow-detail .info {
    display:block;
}
.note-list .follow-detail .info .title {
    margin: 0;
    font-size: 17px;
    font-weight: 400;
}
.note-list .follow-detail .info p {
    margin-bottom: 0;
    color: #969696;
}
.note-list .follow-detail .signature {
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid #e1e1e1;
    color: #969696;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.avatar-collection img {
    width: 100%;
    height: 100%;
    border: 1px solid #ddd;
    border-radius: 10%;
}
.note-list .follow-detail .creater, .note-list .follow-detail .creater:hover {
    color: #3194d0;
}
.aside form{
    margin-bottom: 20px;
    margin-top: 10px;
}
.aside  form textarea{
    width:100%;
    height:125px;
    font-size: 14px;
    margin-bottom: 5px;
    padding:5px 10px;
    border:1px solid #ccc;
    border-radius: 4px;
    display:inline-block;
    vertical-align: top;
    outline-style: none;
    resize: none;
    font-size:13px;
}
.aside form input{
    padding:5px 20px;
    font-size: 14px;
    border: 1px solid #42c02e;
    background-color: #fff;
    color: #42c02e !important;
    border-radius: 20px;
}
.aside form a{
    margin-left: 10px;
    font-size: 14px;
    color:#969696;
    vertical-align: middle;
    line-height: 34px;
}

/*文章缓存样式*/
.content-placeholder{
    position: relative;
}
.content-placeholder .author .avatar{
    width: 32px;
    height: 32px;
    background-color: #ebebeb;
    border-radius: 50%;
    display: inline-block;
    vertical-align: middle;
    margin-right: 5px;
}
.content-placeholder .author .info{
    width: 80px;
    height: 16px;
    display: inline-block;
    background-color: #ebebeb;
    vertical-align: middle;
}
.content-placeholder .title{
    width: 180px;
    height: 19px;
    background-color: #ebebeb;
    margin-top: 10px;
}
.content-placeholder .abstract{
    width: 70%;
    height: 16px;
    background-color: #ebebeb;
    margin-top: 10px;
}
.content-placeholder .ab1{
    animation: loading 1s ease-in-out infinite;
}
.content-placeholder .ab2{
    animation: loading 1s ease-in-out -.5s infinite;
}
.content-placeholder .ab3{
    width: 35%;
    animation: loading2 1s ease-in-out -.5s infinite;
}
.content-placeholder .img{
    position: absolute;
    top:50px;
    right: 10px;
    width: 120px;
    height: 100px;
    background-color: #ebebeb;
    border-radius: 5px;
}
.content-placeholder .meta{
    margin-top: 10px;
}
.content-placeholder .meta i{
    color: #ebebeb;
    font-size: 12px;
    margin: 3px;
}
.content-placeholder .meta span{
    display: inline-block;
    width: 40px;
    height: 16px;
    background-color: #ebebeb;
    vertical-align: middle;
}
@keyframes loading{
    0%{
        width: 35%;
    }
    25%{
        width: 70%;
    }
    50%{
        width: 70%;
    }
    100%{
        width: 35%;
    }
}
@keyframes loading2{
    0%{
        width: 10%;
    }
    25%{
        width: 35%;
    }
    50%{
        width: 35%;
    }
    100%{
        width: 10%;
    }
}

/***********************专题页面**********************/
.collection .row {
    padding-top:30px;
}
.collection .main .main-top {
    margin-bottom: 35px;
}
.collection .main .main-top .avatar-collection {
    float: left;
    width: 80px;
    height: 80px;
}
.avatar-collection img {
    width: 100%;
    height: 100%;
    border: 1px solid #ddd;
    border-radius: 10%;
}
.collection .main .main-top .follow, .collection .main .main-top .follow-cancel, .collection .main .main-top .follow-each, .collection .main .main-top .following {
    padding: 8px 0;
    width: 100px;
}
.collection .main .main-top .btn {
    float: right;
    margin: 23px 0 23px 16px;
    font-size: 15px;
}
.collection .main .main-top .btn-hollow {
    padding: 8px 0;
    width: 90px;
    font-weight: 400;
    line-height: normal;
    border-radius: 40px;
    background: none;
    border: 1px solid rgba(59,194,29,.7);
}
.collection .main .main-top .btn-hollow:hover {
    background: rgb(245,252,243);
}
.collection .main .main-top .btn {
    float: right;
    margin: 23px 0 23px 16px;
    font-size: 15px;
}
.collection .main .main-top .btn-success {
    color:#fff!important;
    background:#42c02e;
    border-radius: 40px;
}
.collection .main .main-top .btn-success:hover {
    background: rgb(61,185,34)!important;
}
.collection .main .main-top .title {
    padding: 10px 0 0 100px;
}
.collection .main .main-top .title .name {
    display: inline;
    font-size: 21px;
    font-weight: 700;
    vertical-align: middle;
}
.collection .main .main-top .info {
    margin-top: 10px;
    padding-left: 100px;
    font-size: 14px;
    color: #969696;
}
.collection .aside .title {
    float: left;
    margin-bottom: 10px;
    font-size: 14px;
    color: #969696;
}
.collection .aside .description {
    position: relative;
    margin-bottom: 20px;
    padding: 0 0 16px;
    text-align: left;
    font-size: 14px;
    border-bottom: 1px solid #f0f0f0;
    clear: both;
    word-break: break-word!important;
    word-break: break-all;
}
.collection .aside .share {
    margin-bottom: 20px;
    padding-bottom: 20px;
    border-bottom: 1px solid #f0f0f0;
    line-height: 30px;
}
.collection .aside .share span {
    font-size: 14px;
    vertical-align: middle;
}
.collection .aside .share .option {
    margin-left: 10px;
    color: #333;
}
.collection .aside .share i {
    font-size: 22px;
    vertical-align: middle;
}
.collection .aside .list {
    margin-bottom: 20px;
    padding-bottom: 10px;
    list-style: none;
    border-bottom: 1px solid #f0f0f0;
    clear: both;
}
.collection .aside .list li {
    margin-bottom: 10px;
}
.collection .aside .list li a {
    display: inline-block;
}
.collection .aside .avatar, .collection .aside .avatar-collection {
    margin-right: 5px;
    width: 32px;
    height: 32px;
}
.collection .aside a, .collection .aside a:hover {
    color: #3194d0;
}
.collection .aside .name {
    position: relative;
    max-width: 236px;
    vertical-align: middle;
    top: 1px;
    font-size: 14px;
    color: #333;
}
.collection .aside .tag {
    padding: 1px 3px;
    margin-left: 2px;
    border-radius: 3px;
    font-size: 12px;
    color: #969696;
    border: 1px solid #969696;
}
.collection .aside .list {
    margin-bottom: 20px;
    padding-bottom: 10px;
    list-style: none;
    border-bottom: 1px solid #f0f0f0;
    clear: both;
}
.collection .aside .list.collection-follower li {
    display: inline-block;
}
.collection .aside .list.collection-follower li:first-child {
    margin-left: -3px;
}
.collection .aside .list li {
    margin-bottom: 10px;
}
.collection .aside .list.collection-follower li a {
    margin-right: -10px;
}
.collection .aside .list.collection-follower li img {
    border: 3px solid #fff;
    background-color: #fff;
}
